<template>
  <div id="box" style="background: #f5f5f5;">
      <!-- PC端 -->
      <div class="indexWrap">
          <swipers></swipers> <!-- swiper组件 -->
          <!-- 公司介绍 -->
          <el-row class="CompanyIntroduction">公司介绍</el-row>
          <div style="width:980px;margin:0 auto;">
              <el-row>
                  <el-col  :sm="24" :md="24" :lg="24">
                      <div class="IntroductionLis">
                          <input type="text" class="IntroductionInput" placeholder="成为世界领先的AI企业, 推动科技进步和社会发展我们是一家致力于人工智能技术研发与应用的公司。最优秀的AI产品和服务, 将人工智能技术应用于各个行业。">
                      </div>
                  </el-col>
              </el-row>
          </div>
          <!-- 公司产品 -->
          <el-row class="CompanyIntroduction">公司产品</el-row>
          <el-row class="CompanyChanpin" >成为世界领先的AI企业, 推动科技进步和社会发展</el-row>
          <div style="width:1180px;margin:0 auto;">
              <el-row :gutter="20" class="CompanyChanpinBox">
                  <el-col :sm="18" :md="11" :lg="6" v-for="item,index in 12" :key="index">
                      <div class="CompanyChanpinLis">
                          <div class="CompanyChanpinTop">
                              <img src="../assets/indexLogo.png" class="index_pic" alt="">
                              <span class="CompanyChanpinText">{{ index+1 }}</span>
                          </div>
                          <div class="CompanyChanpinBottom">
                              <p class="roductP1">校办/教职工会议</p>
                              <p class="roductP2">成为世界领先的AI企业, 推动科技进步和社会发展我们是一家致力于人工智能技术研发与应用的公司。最优秀的AI产品和服务,
                                  将人工智能技术应用于各个行业。</p>
                          </div>
                      </div>
                  </el-col>
              </el-row>
          </div>
          <!-- 研究历程 -->
          <div style="width:100%;margin:0 auto;">
              <el-row>
                  <el-col :sm="24" :md="24" :lg="24" :xl="24">
                      <div class="index_bg">
                          <el-row class="CompanyIntroduction11" style="color: #fff;">研究历程</el-row>
                          <div style="width: 1180px;margin: 0 auto;">
                              <!-- <el-col :md="hidden-md-and-up" :lg="24" class="pos_ab">111111</el-col> -->
                              <el-row :gutter="20">
                                  <el-col :sm="24" :md="24" :lg="8" v-for="item,index in 5" :key="index">
                                      <div class="courseLis">
                                          <div class="courseBoxLeft"><img src="../assets/indexLogo.png" class="course_pic"></div>
                                          <div class="courseBoxRight">
                                              <p class="roductP1">校办/教职工会议</p>
                                              <p class="roductP2">成为世界领先的AI企业, 推动科技进步和社会发展我们是一家致力于人工智能技术研发与应用的公司，将人工智能技术应用于各个行业。</p>
                                          </div>
                                      </div>
                                  </el-col>
                              </el-row>
                          </div>
                      </div>
                  </el-col>
              </el-row>
          </div>
          <!-- 合作伙伴 -->
          <el-row class="CompanyIntroduction">合作伙伴</el-row>
          <div style="width: 980px;margin: 0 auto;">
              <el-row :gutter="20" class="PartnerBom">
                  <el-col  :sm="23" :md="12" :lg="8" :xl="5" v-for="item in listImg" :key="item.id" style="margin-right: -30px;margin-left: 20px;">
                      <div class="Partner">
                          <img src="../assets/indexImg1.png" class="PartnerImg" alt="">
                          <p class="PartnerP1">{{ item.txt }}</p>
                      </div>
                  </el-col>
              </el-row>
          </div>
      </div>
      <!-- 移动端 -->
       <div class="yd_wrap">
          <!-- 公司介绍 -->
          <div class="yd_title_text">公司介绍</div>
          <div class="yd_introduce_box">
              <p>成为世界领先的AI企业，推动科技进步和社会发展我们是一家致力于人工智能技术研发与应用的公司。最优秀的AI产品和服务，将人工智能技术应用于各个行业。</p>
          </div>
          <div class="yd_title_text">公司产品</div>
          <div class="ydProductsText">成为世界领先的AI企业，推动科技进步和社会发展</div>
          
          <!-- 横向滚动 -->
          <div class="scroll-hidden">
              <div class="scroll-body">
                  <div class="scroll-secbody">

                      <div class="ProductsLis">
                          <div class="ProductsLisTop">
                              <img src="../assets/indexLogo.png" class="ProductsLisPic">
                              <p class="ProductsLisP">校办/教职工会议</p>
                          </div>
                          <div class="ProductsLisBottom">
                              成为世界领先的AI企业，推动科技进步和社会发展我们是一家致力于人工智能技术研发与应用的公司。
                          </div>
                      </div>
                      <div class="ProductsLis ProductsLisTab">
                          <div class="ProductsLisTop">
                              <img src="../assets/indexLogo.png" class="ProductsLisPic">
                              <p class="ProductsLisP ProductsLisPTab">校办/教职工会议</p>
                          </div>
                          <div class="ProductsLisBottom ProductsLisBottomTab">
                              成为世界领先的AI企业，推动科技进步和社会发展我们是一家致力于人工智能技术研发与应用的公司。
                          </div>
                      </div>
                      <div class="ProductsLis ProductsLisTab">
                          <div class="ProductsLisTop">
                              <img src="../assets/indexLogo.png" class="ProductsLisPic">
                              <p class="ProductsLisP ProductsLisPTab">校办/教职工会议</p>
                          </div>
                          <div class="ProductsLisBottom ProductsLisBottomTab">
                              成为世界领先的AI企业，推动科技进步和社会发展我们是一家致力于人工智能技术研发与应用的公司。
                          </div>
                      </div>

                  </div>
              </div>
          </div>

          <!-- 研究历程 -->
           <div class="courseBox">
              <div class="yd_title_text" style="color:#fff;padding-top: 10px;padding-bottom: 7px;">研究历程</div>
              <div class="scroll-hidden">
                  <div class="scroll-body">
                      <div class="scroll-secbody">

                          <div class="ProductsLis ProductsLisTab">
                              <div class="ProductsLisTop">
                                  <img src="../assets/indexLogo.png" class="ProductsLisPic">
                                  <p class="ProductsLisP ProductsLisPTab">校办/教职工会议</p>
                              </div>
                              <div class="ProductsLisBottom ProductsLisBottomTab">
                                  成为世界领先的AI企业，推动科技进步和社会发展我们是一家致力于人工智能技术研发与应用的公司。
                              </div>
                          </div>
                          <div class="ProductsLis ProductsLisTab">
                              <div class="ProductsLisTop">
                                  <img src="../assets/indexLogo.png" class="ProductsLisPic">
                                  <p class="ProductsLisP ProductsLisPTab">校办/教职工会议</p>
                              </div>
                              <div class="ProductsLisBottom ProductsLisBottomTab">
                                  成为世界领先的AI企业，推动科技进步和社会发展我们是一家致力于人工智能技术研发与应用的公司。
                              </div>
                          </div>
                          <div class="ProductsLis ProductsLisTab">
                              <div class="ProductsLisTop">
                                  <img src="../assets/indexLogo.png" class="ProductsLisPic">
                                  <p class="ProductsLisP ProductsLisPTab">校办/教职工会议</p>
                              </div>
                              <div class="ProductsLisBottom ProductsLisBottomTab">
                                  成为世界领先的AI企业，推动科技进步和社会发展我们是一家致力于人工智能技术研发与应用的公司。
                              </div>
                          </div>

                      </div>
                  </div>
              </div>
           </div>

          <!-- 合作伙伴 -->
          <div class="yd_title_text">合作伙伴</div>
          <div class="partnerBox">
              <div class="partnerLis" v-for="item,index in PcPartnerLis" :key="index">
                  <img src="../assets/partnerPic.png" class="partnerPic">
                  <p class="partnerP">校办/教职工会议</p>
              </div>
          </div>

       </div>
  </div>
</template>
<script>
import swipers from "@/components/swiperImg.vue";
export default {
components: {
  swipers,
},
data(){
          return{
              indexJieshao:[
                  {
                      id:0,
                      title:"校办/教职工会议",
                      txt:"成为世界领先的AI企业, 推动科技进步和社会发展我们是一家致力于人工智能技术研发与应用的公司。最优秀的AI产品和服务, 将人工智能技术应用于各个行业。"
                  },
                  {
                      id:1,
                      title:"校办/教职工会议",
                      txt:"成为世界领先的AI企业, 推动科技进步和社会发展我们是一家致力于人工智能技术研发与应用的公司。最优秀的AI产品和服务, 将人工智能技术应用于各个行业。"
                  },
                  {
                      id:2,
                      title:"校办/教职工会议",
                      txt:"成为世界领先的AI企业, 推动科技进步和社会发展我们是一家致力于人工智能技术研发与应用的公司。最优秀的AI产品和服务, 将人工智能技术应用于各个行业。"
                  },
                  {
                      id:3,
                      title:"校办/教职工会议",
                      txt:"成为世界领先的AI企业, 推动科技进步和社会发展我们是一家致力于人工智能技术研发与应用的公司。最优秀的AI产品和服务, 将人工智能技术应用于各个行业。"
                  }
              ],
              listImg:[
                  {
                      id:0,
                      url:"../assets/indexImg1.png",
                      txt:"校办/教职工会议"
                  },
                  {
                      id:1,
                      url:"../assets/indexImg1.png",
                      txt:"校办/教职工会议"
                  },
                  {
                      id:2,
                      url:"../assets/indexImg2.png",
                      txt:"校办/教职工会议"
                  },
                  {
                      id:3,
                      url:"../assets/indexImg1.png",
                      txt:"校办/教职工会议"
                  },
                  {
                      id:4,
                      url:"../assets/indexImg1.png",
                      txt:"校办/教职工会议"
                  },
                  {
                      id:5,
                      url:"../assets/indexImg1.png",
                      txt:"校办/教职工会议"
                  },
                  {
                      id:6,
                      url:"../assets/indexImg1.png",
                      txt:"校办/教职工会议"
                  },
                  {
                      id:7,
                      url:"../assets/indexImg1.png",
                      txt:"校办/教职工会议"
                  },
                  {
                      id:8,
                      url:"../assets/indexImg1.png",
                      txt:"校办/教职工会议"
                  },
                  {
                      id:9,
                      url:"../assets/indexImg1.png",
                      txt:"校办/教职工会议"
                  },
              ],
              PcPartnerLis:[0,1,2,3,4,5,6,7,8,9]
          }
}
}
</script>

<style lang="scss">
.indexWrap {
background: #f5f5f5;
padding-bottom: 100px;
}
.yd_wrap{
  width: 375px;
  padding-bottom: 200px;
  display: none;

  .yd_title_text{
      width: 72px;
      height: 26px;
      font-size: 18px;
      font-weight: bold;
      color: #383F58;
      margin: 0 auto;
      margin-top: 20px;
      margin-bottom: 10px;
  }

  // 公司产品
  .yd_introduce_box{
      width: 345px;
      height: 78px;
      background: #fff;
      margin: 0 auto;
      padding: 8px;
      box-sizing: border-box;

      p{
          width: 325px;
          height: 56px;
          color: #798099;
          font-size: 12px;
          border: none;
          outline: none;
          display: flex;
          flex-wrap: wrap;
      }
  }

  .ydProductsText{
      width: 310px;
      height: 20px;
      margin: 0 auto;
      font-family: Source Han Sans;
      font-size: 14px;
      font-weight: normal;
      line-height: normal;
      text-align: center;
      letter-spacing: 0em;
      font-variation-settings: "opsz" auto;
      color: #798099;
      margin-bottom: 15px;
  }

  // 横向滚动样式
  .scroll-hidden{
      height:118px;
      overflow:hidden;
      margin-left: 15px;
      margin-bottom: 20px;
      .scroll-body{
          overflow-y: hidden;
          overflow-x: auto;
          &::-webkit-scrollbar {
              display: none;
          }
          .scroll-secbody{
              width: 700px;
              // white-space: nowrap;
              display: flex;   
              .every_content{
                  flex-shrink: 0;
                  height:150px;
                  margin-right: 25px;
                  margin-bottom: 10px;
                  text-align: center;
              }
          }
      }
  }
  // 滚动内容样式
  .ProductsLis{
      width: 240px;
      opacity: 1;
      background: #0066FF;
      box-sizing: border-box;
      border: 2px solid #0066FF;
      padding: 10px;
      box-sizing: border-box;
      margin-right: 10px;
      border-radius: 3px;

      .ProductsLisTop{
          width: 100%;
          display: flex;
          margin-bottom: 10px;

          .ProductsLisPic{
              width: 22px;
              height: 22px;
              margin-right: 8px;
          }

          .ProductsLisP{
              height: 20px;
              font-family: Source Han Sans;
              font-size: 14px;
              font-weight: bold;
              line-height: normal;
              letter-spacing: 0em;
              color: #FFFFFF;
          }
      }

      .ProductsLisBottom{
          height: 51px;
          font-family: Source Han Sans;
          font-size: 12px;
          font-weight: normal;
          line-height: normal;
          letter-spacing: 0em;
          color: #FFFFFF;
          text-align: start;
          display:flex;
          flex-wrap: wrap;
      }
  }

  //研究历程
  .courseBox{
      width: 375px;
      height: 180px;
      background: url(../assets/processPic.png);
  }
  .ProductsLisTab{
      background: #fff !important;
      border-color: #fff !important;
  }
  .ProductsLisPTab{
      color: #383F58 !important;
  }
  .ProductsLisBottomTab{
      color: #798099 !important;
  }

  // 合作伙伴
  .partnerBox{
      width: 375px;
      padding: 0 10px;
      box-sizing: border-box;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;

      .partnerLis{
          width: 170px;
          text-align: center;
          margin-bottom: 15px;

          .partnerPic{
              width: 170px;
              height: 82px;
              background: url(../assets/partnerPic.png);
          }

          .partnerP{
              font-family: Source Han Sans;
              font-size: 14px;
              font-weight: bold;
              line-height: normal;
              letter-spacing: 0em;
              font-variation-settings: "opsz" auto;
              color: #383F58;
          }
          
      }
  }


}
@media (max-width: 750px) {
  .indexWrap{
      display: none;
  }
  .yd_wrap{
      display: block;
  }
}





/* 公司介绍 */
.CompanyIntroduction {
margin-top: 20px;
}
.CompanyIntroduction{
  width: 144px;
  height: 52px;
  font-family: Source Han Sans, Source Han Sans;
  font-weight: 700;
  font-size: 36px;
  color: #383F58;
  line-height: 52px;
  text-align: left;
  font-style: normal;
  text-transform: none;
  margin: 0 auto;
  margin-top: 80px;
  margin-bottom: 20px;
}
.IntroductionLis {
  border: 2px solid transparent;
  margin-bottom: 10px;
  background: #fff;
  padding: 20px 32px 180px 40px;
  /* cursor: pointer; */
  border-radius: 10px;
}
.IntroductionInput{
  width: 100%;
  border: none;
  padding-bottom: 100px;
  outline: none;
  font-size: 12px;
  font-family: Source Han Sans, Source Han Sans;
  color: #798099;
}

.IntroductionLis img {
width: 50px;
height: 50px;
}
.IntroductionLis:hover{
  border: 2px solid #0066ff;
  transition: 0.3s;
}

.IntroductionLisLeft {
display: flex;
align-items: center;
}

.index_pic {
width: 32px;
height: 32px;
}

.IntroductionLisRight {
/* background: blue; */
margin-left: 20px;
}


.index_pic{
  width: 60px;
  height: 60px;
}
.roductP1{
  width: 140px;
  height: 26px;
  font-family: Source Han Sans, Source Han Sans;
  font-weight: 700;
  font-size: 18px;
  color: #383F58;
  line-height: 26px;
  text-align: left;
  font-style: normal;
  text-transform: none;
  transition: 0.3s;
  margin-top: 15px;
  margin-bottom: 6px;
}
.roductP2 {
  font-family: Source Han Sans, Source Han Sans;
  font-weight: 400;
  font-size: 10px;
  color: #798099;
  line-height: 17px;
  text-align: left;
  font-style: normal;
  text-transform: none;
  transition: 0.3s;
}

/* 公司产品 */
.CompanyChanpin{
  width: 307px;
  height: 20px;
  font-family: Source Han Sans, Source Han Sans;
  font-weight: 400;
  font-size: 14px;
  color: #798099;
  line-height: 20px;
  text-align: center;
  font-style: normal;
  text-transform: none;
  margin: 0 auto;
  margin-bottom: 60px;
}

.CompanyChanpinBox {
margin: 5px 0;
}

.CompanyChanpinLis {
  background: #fff;
  padding: 20px 20px 23px 15px;
  margin-bottom: 20px;
  transition: 0.3s;
  border-radius: 10px 10px 10px 10px;
  border: 2px solid transparent;
}

.CompanyChanpinLis:hover {
background: #0066ff;
color: #fff;
cursor: pointer;
transition: 0.3s;
}

.CompanyChanpinLis:hover .roductP1 {
color: #fff;
transition: 0.3s;
}

.CompanyChanpinLis:hover .roductP2 {
color: #eff5ff;
transition: 0.3s;
}

/* 研究历程 */
.CompanyIntroduction11{
  width: 144px;
  height: 52px;
  font-family: Source Han Sans, Source Han Sans;
  font-weight: 700;
  font-size: 36px;
  color: #FFFFFF;
  line-height: 52px;
  text-align: left;
  font-style: normal;
  text-transform: none;
  margin: 0 auto;
  margin-top: 60px;
  padding-top: 30px;
  margin-bottom: 60px;
}
.CompanyChanpinTop {
  width: 100%;
  /* background: #ddd; */
  display: flex;
  justify-content: space-between;
  align-items: start;
}
.CompanyChanpinText{
  width: 22px;
  height: 26px;
  font-family: Source Han Sans, Source Han Sans;
  font-weight: 700;
  font-size: 18px;
  color: #383F58;
  line-height: 26px;
  text-align: left;
  font-style: normal;
  text-transform: none;
  transition: 0.3s;
}
.CompanyChanpinLis:hover .CompanyChanpinText{
  color: #fff;
  transition: 0.3s;
}
.index_bg{
  background-image: url('../assets/indexImg2.png');
  background-repeat: no-repeat;
  background-size: 1920px 100%;
  padding-bottom: 30px;
  margin: 0 auto;
}
.courseLis{
  padding: 20px 25px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  background: #fff;
  margin-bottom: 20px;
}
.courseBoxLeft {
display: flex;
align-items: center;
}
.course_pic{
  width: 55px;
  height: 54px;
}
.courseBoxRight {
padding-left: 16px;
}
.pos_ab {
background: #fff;
position: absolute;
top: 165px;
}

/* 合作伙伴 */
.Partner {
  /* background: #fff; */
  display: flex;
  flex-direction: column;
  cursor: pointer;
  border-radius: 4px;
}
.PartnerImg{
  border-radius: 10px 10px 10px 10px;
  /* border: 1px solid #FFFFFF; */
}

.PartnerP1 {
  margin-top: 15px;
  height: 20px;
  font-family: Source Han Sans, Source Han Sans;
  font-weight: 700;
  font-size: 14px;
  color: #383F58;
  line-height: 20px;
  text-align: left;
  font-style: normal;
  text-transform: none;
  text-align: center;
  margin-bottom: 20px;
}

.PartnerBom {
margin-bottom: 20px;
}

.courseLis {
background: #fff;
margin-bottom: 20px;
}
</style>

